<script setup lang='ts'>
import { onMounted } from 'vue';

// 定义接受props参数
// Vue3.5+的版本的用法
// const { age = 10 } = defineProps<{
//     name: string
//     age?: number
// }>()
// 以下版本
const props = withDefaults(
    defineProps<{
        name: string,
        age?: number,
        func?(count:number): void
    }>(),
    {
        name: '默认值',
        age: 100
    }
)

const test = () => {
    // 这里拿到的是最新传递过来的数据，如果有的话
    console.log(props.name, props.age);
}
onMounted(() => {
    test()
})

// 自定义事件类型
const emits = defineEmits<{
    'updateAge':[age:number],
    'updateName':[name:string],
    'updateAll':[name:string,age:number]
}>()

// 实现子传父
const toParentAge = ()=>{
    emits('updateAge',props.age-1)
}
const toParentName = ()=>{
    emits('updateName','李四')
}
const toParentAll = ()=>{
    emits('updateAll','王五',props.age+1)
}


</script>

<template>
    <div class="child">
        <h2>子组件传递过来的父组件中的数据</h2>
        <p>姓名:{{ name }}</p>
        <p>年龄:{{ age }}</p>
        <button @click="func(age-1)">子传父-回调函数形式</button>
        <button @click="toParentAge">子传父-emits形式-改年龄</button>
        <button @click="toParentName">子传父-emits形式-改姓名</button>
        <button @click="toParentAll">子传父-emits形式-改所有信息</button>
        <button @click="emits('updateAll',name+'1',age+1)">子传父-emits形式-改所有信息</button>
    </div>
</template>

<style scoped></style>